<template>
  <div>
    <!-- 轮播图组件 -->
    <swiper :lunbotuList='lunbotuList' :isFull='true'></swiper>
    <!-- 九宫格到六宫格的改造 -->
    <ul class="mui-table-view mui-grid-view mui-grid-9">
      <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
        <router-link to="/home/newlist">
          <img src="../../images/menu1.png" alt="">
          <div class="mui-media-body">新闻咨询</div>
        </router-link>
      </li>
      <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
        <router-link to="/home/photolist">
          <img src="../../images/menu2.png" alt="">
          <div class="mui-media-body">图片分享</div>
        </router-link>
      </li>
      <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
        <router-link to="/home/goodslist">
         <img src="../../images/menu3.png" alt="">
          <div class="mui-media-body">商品购买</div>
        </router-link >
      </li>
      <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
        <a href="#">
          <img src="../../images/menu4.png" alt="">
          <div class="mui-media-body">留言反馈</div>
        </a>
      </li>
      <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
        <a href="#">
          <img src="../../images/menu5.png" alt="">
          <div class="mui-media-body">视频专区</div>
        </a>
      </li>
      <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
        <a href="#">
          <img src="../../images/menu6.png" alt="">
          <div class="mui-media-body">联系我们</div>
        </a>
      </li>
    </ul> 
  </div>
</template>

<script>
import { Toast } from "mint-ui";
// 导入轮播图组件、
import swiper from '../subcomponents/swiper.vue'


export default {
  data() {
    return {
      lunbotuList: [] //保存轮播图的数组
    };
  },
  created() {
    this.getLunbotu();
  },
  methods: {
    getLunbotu() {
      //获取轮播图的方法
      this.$http
        .get("https://www.apiopen.top/satinApi?type=1&page=1")
        .then(result => {
          console.log(result.body);
          //   判断条件主要是看接口返回的结果，什么情况下代表成功
          if (result.body.code == 200) {
            // 成功了
            this.lunbotuList = result.body.data;
            //  Toast('获取加载轮播图ok');  测试是否成功
          } else {
            Toast("获取加载轮播图失败......");
          }
        });
    },
  },
  components:{
    swiper
  }
};
</script>

<style scoped>

/* 六宫格的样式 */
.mui-grid-view.mui-grid-9{
    background-color: #fff;
    border:none;
}
.mui-grid-view.mui-grid-9 img{
    width: 60px;
}

.mui-grid-view.mui-grid-9 .mui-media-body{
    font-size: 13px;
}
.mui-grid-view.mui-grid-9 .mui-table-view-cell{
    border: none;
}
</style>

